<template>
  <div style="width: 100%; height: 100%">
    <el-container class="home-qyda" v-if="showlist" v-loading="loading">
      <el-header class="header search-header">
        <el-form
          ref="ruleFormRef"
          class="between-form"
          :model="search"
          :inline="true"
        >
          <div>
            <el-form-item label="商户名称" prop="enterpriseName">
              <el-input
                v-model="search.enterpriseName"
                placeholder="请输入商户名称"
                clearable
              />
            </el-form-item>
            <el-form-item label="负责人" prop="safetyDirector">
              <el-input
                v-model="search.safetyDirector"
                placeholder="请输入负责人"
                clearable
              />
            </el-form-item>

            <el-form-item label="商户类别" prop="industryCategory">
              <el-select
                v-model="search.industryCategory"
                placeholder="请选择"
                style="min-width: 120px"
                clearable
              >
                <el-option key="" label="全部" value=""> </el-option>
                <el-option
                  v-for="item in sortList"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key"
                />
              </el-select>
            </el-form-item>
          </div>

          <el-form-item>
            <el-button
              type="primary"
              class="search-btn"
              @click="getSearch(ruleFormRef)"
            >
              查询
            </el-button>
            <el-button @click="reset(ruleFormRef)" class="reset-btn"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </el-header>
      <el-header class="header">
        <div class="header-l">
          <el-icon color="#2263BF"><Operation /></el-icon>
          <span class="text">商户档案</span>
        </div>
        <div class="header-r">
          <el-button type="primary" class="self_btn" @click="changeStatus">
            <el-icon><Plus /></el-icon>新增
          </el-button>
          <el-button type="primary" class="self_btn" @click="saveExport">
            <el-icon class="el-icon--right"><Upload /></el-icon>导出
          </el-button>
        </div>
      </el-header>
      <el-main>
        <el-container>
          <el-main>
            <el-container>
              <el-main class="container bc-table">
                <el-table
                  :data="objecInfo.tableData"
                  style="width: 100%; height: 100%"
                >
                  <el-table-column prop="enterpriseNameCn" label="商户名称" />
                  <el-table-column prop="safetyDirector" label="负责人" />

                  <el-table-column prop="contactNumber" label="联系电话">
                  </el-table-column>
                  <el-table-column prop="industryCategory" label="商户类别">
                  </el-table-column>
                  <el-table-column prop="registeredAddress" label="地址">
                  </el-table-column>
                  <el-table-column label="操作">
                    <template #default="scope">
                      <el-button
                        link
                        type="primary"
                        size="small"
                        @click="changeStatus(scope.row)"
                        >查看</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </el-main>
              <el-footer class="footer mt20">
                <el-pagination
                  v-model:current-page="tableField.pageNo"
                  v-model:page-size="tableField.pageSize"
                  :page-sizes="[10, 20, 30, 50, 100]"
                  layout="total,sizes, prev, pager, next, jumper"
                  :total="total"
                  :background="true"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  prev-text="上一页"
                  next-text="下一页"
                />
              </el-footer>
            </el-container>
          </el-main>
        </el-container>
      </el-main>
    </el-container>
    <detail :row="currentData" v-else @close="close"></detail>
  </div>
</template>

<script setup>
import { onMounted, ref, reactive, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { getenterpriselist, getDaType } from '@/api/dazx';
import { Minxfun } from '@/utils/minxin';
import detail from './detail.vue';
const {
  handleSizeChange,
  handleCurrentChange,
  tableField,
  total,
  loading,
  formatDateTime,
} = Minxfun();
const router = useRouter();

const ruleFormRef = ref();
const search = reactive({
  enterpriseType: '2',
  enterpriseName: '',
  safetyDirector: '',
  industryCategory: '',
});

onMounted(() => {
  getType();
  getTableData();
});

// 获取部门
let doorList = ref([]);
let sortList = ref([]);
const getType = async () => {
  try {
    let res = await getDaType({
      paramType: 'merchant_type',
    });
    sortList.value = res.data;
    // let res1 = await busioptions();
    // sortList.value = res1.data;
  } catch (e) {
    console.log(e);
  }
};

const getSearch = () => {
  if (tableField.value.pageNo == 1) {
    getTableData();
  } else {
    tableField.value.pageNo = 1;
    getTableData();
  }
};

const reset = (ruleFormRef) => {
  ruleFormRef.resetFields();
  getTableData();
};

watch(
  tableField,
  (newVal, oldVal) => {
    getTableData();
  },
  { deep: true }
);
let objecInfo = reactive({
  tableData: [{ id: 1 }],
});
const getTableData = async () => {
  try {
    loading.value = true;
    let { data } = await getenterpriselist({
      ...tableField.value,
      ...search,
      pageNum: tableField.value.pageNo,
    });
    loading.value = false;

    objecInfo.tableData = data.enterpriseList;
    console.log(objecInfo.tableData);
    total.value = Number(data.total) || 0;
  } catch (e) {
    loading.value = false;
    console.error(e);
  }
};

let currentRow = ref(null);
let showDetail = ref(false);
const handleClick = (value) => {
  currentRow.value = value;
  showDetail.value = true;
};

// 导出
const saveExport = async () => {
  try {
    // exportVisable.value = false;
    console.log(fieldList.value);
    let params = {
      objectId: currentTab.value,
      queryOptions: searchData.value,
      orderBys: sortList.value,
      selectItems: fieldList.value.map((item) => item.props),
    };
    let config = {
      headers: {
        'Content-Type': 'application/json;charset=UTF-8',
        'Access-Control-Allow-Origin': true,
        withCredentials: true,
        'Access-Control-Expose-Headers': 'Authorization',
      },
      responseType: 'blob',
    };
    axios
      .post('/data-center/query/composite/export', params, config)
      .then((res) => {
        window.open(res.data.data.fileUrl);
      });
  } catch (e) {}
};

// 展示详情
let showlist = ref(true);
let currentData = ref(null);
const changeStatus = (value) => {
  if (value) {
    currentData.value = value;
  } else {
    currentData.value = null;
  }
  showlist.value = !showlist.value;
};

// 关闭详情
const close = () => {
  showlist.value = !showlist.value;
  // getTableData()
};
</script>

<style lang="scss" scoped>
.home-qyda {
  width: 100%;
  height: 100%;
  .header {
    min-height: 36px;
    line-height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    overflow: hidden;
    margin-bottom: 18px;
    .header-l {
      display: flex;
      align-items: center;
      .text {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 16px;
        color: #333333;
        line-height: 22px;
        letter-spacing: 1px;
        text-align: left;
        padding-left: 14px;
      }
    }
  }
  .container {
  }
}
.el-container {
  height: 100% !important;
  padding: 0 !important;
}
.el-header {
  height: auto !important;
  min-height: 36px !important;
}
.el-main {
  padding: 0 !important;
}
.search {
  margin: 0 50px;
}
.header-r {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: #666666;
}
</style>

<style>
.el-form-item__label {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: #333333;
}
</style>
